<template>
  <div class="app-container">
    <el-button type="primary" @click="handleAddRole">创建新的角色</el-button>
    <el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="角色名" width="220">
        <template slot-scope="scope">
          {{ getRoleName(scope.row.key) }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="描述">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="权限列表">
        <template slot-scope="scope">
          <ul>
            <li v-for="permission in scope.row.permissionList" :key="permission">{{ permission }}</li>
          </ul>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑角色':'新建角色'">
      <el-form :model="role" label-width="80px" label-position="left">
        <el-form-item label="角色名">
          <el-input v-model="role.name" placeholder="角色名" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
              v-model="role.description"
              :autosize="{ minRows: 2, maxRows: 4}"
              type="textarea"
              placeholder="描述"
          />
        </el-form-item>
        <el-form-item label="权限列表">
          <el-checkbox-group v-model="role.permissionList">
            <el-checkbox label="create" />
            <el-checkbox label="delete" />
            <el-checkbox label="read" />
            <el-checkbox label="write" />
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmRole">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {deepClone, rolesToRoleList} from '@/utils'
import {getRoles, addRole, deleteRole, updateRole, login} from '@/api/User_Login'
import {setACCESSToken, setRefreshToken} from "@/utils/auth";

const defaultRole = {
  key: '',
  name: '',
  description: '',
  permissionList: []
}

export default {
  data() {
    return {
      role: Object.assign({}, defaultRole),
      rolesList: [
        {
          key: '1',
          name: '超级管理员',
          description: '拥有读、写和删除权限',
          permissionList: ['读', '写', '删除']
        },
        {
          key: '2',
          name: '管理员',
          description: '拥有读和写权限',
          permissionList: ['读', '写']
        },
        {
          key: '3',
          name: '普通用户',
          description: '只拥有读权限',
          permissionList: ['读']
        }
      ],
      dialogVisible: false,
      dialogType: 'new'
    }
  },
  created() {
    getRoles().then(res => {
      this.rolesList = rolesToRoleList(res.data);
    }).catch(() => {
      // 登录失败，显示错误提示
      this.loading = false
    })
  },
  methods: {
    handleAddRole() {
      this.role = Object.assign({}, defaultRole)
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.role = deepClone(scope.row)
    },
    handleDelete({$index, row}) {
      this.$confirm('确认删除该角色吗？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
    .then(async () => {
            // 模拟从服务器删除角色
            this.rolesList.splice($index, 1)
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          })
          .catch(err => {
            console.error(err)
          })
    },
    async confirmRole() {
      const isEdit = this.dialogType === 'edit'
      if (isEdit) {
        await updateRole(this.role.name, this.role);
      } else {
        await addRole(this.role.name, this.role);
      }
      this.dialogVisible = false
      this.$notify({
        title: '成功',
        message: '操作成功！',
        type: 'success'
      })
    },
    getRoleName(key) {
      return this.rolesList[key - 1 ].name;
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
}
// 在此代码的基础之上，有四个字段，分别是权限名，描述，资源类型，操作类型
// 其中权限名，有新建，读，写，删除四种
// 描述随便写写
// 资源类型，有HTML，CSS，TXT，EXE等
// 操作类型有新建，读，写，删除四种。
// 给出这四种的对应，加入在数据中

</style>
